<template>
  <div style="height: 100%">
    <div class="index" v-show="indexFlag" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/index/bg.png' + ')'}">
      <div class="index-rule" @click="goRule">
        <img :src="cdnUrl + '/assets/index/rule.png'" alt="" />
      </div>
      <div class="index-con">
        <img class="con-title" :src="cdnUrl + '/assets/index/title.png'" alt="" />
        <div class="con-center" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/index/center.png' + ')'}">
          <p>已有{{userInfo.num}}用户参与答题</p>
        </div>
        <img class="con-context" :src="cdnUrl + '/assets/index/context.png'" alt="" />
        <div class="con-btn" @click="userInfo.level >= 1 && goQuestion('1')">
          <img :src="userInfo.level >= 1? cdnUrl + '/assets/index/primary-show.png' : cdnUrl + '/assets/index/primary-hide.png'" alt="" />
        </div>
        <div class="con-btn" @click="userInfo.level >= 2 && goQuestion('2')">
          <img :src="userInfo.level >= 2? cdnUrl + '/assets/index/middle-show.png' : cdnUrl + '/assets/index/middle-hide.png'" alt="" />
        </div>
        <div class="con-btn" @click="userInfo.level >= 3 && goQuestion('3')">
          <img :src="userInfo.level >= 3? cdnUrl + '/assets/index/high-show.png' : cdnUrl + '/assets/index/high-hide.png'" alt="" />
        </div>
      </div>
    </div>
    <!-- 活动规则 -->
    <Rule v-show="ruleFlag" @hide="hideRule"></Rule>
    <!-- 初级 -->
    <Primary v-if="askFlag === '1'" :id="qId" @goReturn="goReturn"></Primary>
     <!-- 中级 -->
    <Middle v-if="askFlag === '2'" :id="qId" @goReturn="goReturn"></Middle>
     <!-- 高级 -->
    <High v-if="askFlag === '3'" :id="qId" @goReturn="goReturn"></High>
  </div>
</template>

<script>
import Rule from './Rule'
import Primary from './primary/Primary'
import Middle from './middle/Middle'
import High from './high/High'
import { getUserInfo, addAnswer } from '../service'
import { cdnUrl } from '../service/env'

export default {
  name: 'Index',
  data () {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
      indexFlag: true,
      ruleFlag: false,
      askFlag: '0',
      clickFlag: true,
      qId: '',
      cdnUrl: cdnUrl
    }
  },
  components: {
    Rule,
    Primary,
    Middle,
    High
  },
  mounted () {
    // this.getUserItem()
  },
  methods: {
    // 获取用户信息
    getUserItem () {
      getUserInfo().then((data) => {
        sessionStorage.setItem('userInfo', JSON.stringify(data.data))
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      })
    },
    // 跳转规则
    goRule () {
      this.indexFlag = false
      this.ruleFlag = true
    },
    // 隐藏规则
    hideRule () {
      this.indexFlag = true
      this.ruleFlag = false
    },
    // 答题
    goQuestion (type) {
      if (this.clickFlag) {
        this.clickFlag = false
        addAnswer(type).then((data) => {
          this.clickFlag = true
          if (data.success === 'true') {
            this.qId = data.data.id
            this.askFlag = type
            this.indexFlag = false
          }
        }).catch(() => {
          this.clickFlag = true
        })
      }
    },
    // 再来一次
    goReturn () {
      this.askFlag = '0'
      this.indexFlag = true
      this.getUserItem()
    }
  }
}
</script>

<style lang="scss">
.index{
  width: 100%;
  height: 100%;
  // background: url("../assets/index/bg.png") no-repeat;
  background-size: 100% 100%;
  .index-rule{
    position: absolute;
    top: 25px;
    right: 0;
    width: 51px;
    height: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .index-con{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    img{
      width: 80%;
      margin: 0 auto;
    }
    .con-title{
      margin-top: 23px;
    }
    .con-center{
      width: 92%;
      height: 213px;
      margin: -18px auto 20px;
      // background: url("../assets/index/center.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      p{
        height: 16.5px;
        font-size: 9px;
        font-weight: 600;
        line-height: 15.5px;
        background: #ffffff;
        border-radius: 20px;
        margin-top: 26px;
        padding: 0 4px;
        margin-right: 12px;
      }
    }
    .con-context{
      margin-bottom: 13px;
    }
    .con-btn{
      width: 46.5%;
      margin: 0 auto 7px;
      img{
        width: 100%;
      }
    }
  }
}
</style>
